<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/mui.min.css">
    <link rel="stylesheet" href="./css/style.css">
    <title>标题</title>
</head>

<body>
    <div class="mui-content" id="el">
        <div class="banner-box">
            <img src="./images/banner.jpg">
        </div>
        <div class="tab-box">
            <div class="tab-item" @click="changeTab(0)" :class="showBlock===0?'active':''">企业咨询</div>
            <div class="tab-item" @click="changeTab(1)" :class="showBlock===1?'active':''">咨询记录</div>
        </div>

        <div class="form-box" v-if="showBlock===0">
            <form class="mui-input-group">
                <div class="mui-input-row">
                    <label>单位名称</label>
                <input type="text" class="mui-input-clear" v-model="form.companyname" placeholder="请输入单位名称">
                </div>
                <div class="mui-input-row">
                    <label>姓名</label>
                    <input type="text" class="mui-input-clear" v-model="form.name" placeholder="请输入姓名">
                </div>
                
                <div class="mui-input-row">
                    <label>联系电话</label>
                    <input type="text" class="mui-input-clear" v-model="form.phone" placeholder="请输入联系电话">
                </div>
                    
                <div class="mui-input-row">
                    <label>咨询类别</label>
                    <select class="mui-btn mui-btn-block" style="width: 65%;" v-model="form.type">
                        <option value="item-1">item-1</option>
                        <option value="item-2">item-2</option>
                        <option value="item-3">item-3</option>
                        <option value="item-4">item-4</option>
                        <option value="item-5">item-5</option>
                    </select>
                </div>
                <div class="mui-input-row" style="height: auto">
                    <label>咨询内容</label>
                    <textarea class="zxTextarea" placeholder="请输入咨询内容（必填）" v-model="form.memo"></textarea>
                </div>
                <div class="mui-button-row">
                    <button type="button" class="mui-btn mui-btn-primary" style="width: 90%;margin: 0 auto;">确认</button>
                </div>
            </form>
        </div>

        <div  v-if="showBlock===1">
            <div class="sub-title">咨询列表</div>
            <div class="news-box">
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell mui-media">
                        <a href="javascript:;">
                            <div class="mui-media-body">
                                <div class="new-title">标题</div>
                                <div class="new-intro-row">内容很长很长内容很长很长内容很长很长内容很长很长内容很长很长内容很长很长内容很长很长内容很长很长内容很长很长内容很长很长</div>
                            </div>
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media">
                        <a href="javascript:;">
                            <div class="mui-media-body">
                                <div class="new-title">标题</div>
                                <div class="new-intro-row">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</div>
                            </div>
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media">
                        <a href="javascript:;">
                            <div class="mui-media-body">
                                <div class="new-title">标题</div>
                                <div class="new-intro-row">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</div>
                            </div>
                        </a>
                    </li>
    
                </ul>
            </div>
        </div>
        
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        let vm = new Vue({
            el: "#el",
            data() {
                return {
                    form:{},
                    showBlock:0,
                }
            },
            methods: {
                changeTab(idx){
                    this.showBlock = idx;
                }
            },
        })
    </script>
</body>

</html>